<!--风险评估报告组件-->

<template>
  <div class="risk-report">
    <button @click="generateReport">生成最新报告</button>

    <!-- 报告展示 -->
    <div class="report-content">
      <h3>健康风险评估报告</h3>
      <p>生成时间：{{ report.timestamp }}</p>

      <div class="risk-summary">
        <h4>总体风险评级：<span :class="riskClass">{{ report.riskLevel }}</span></h4>
        <p>{{ report.summary }}</p>
      </div>

      <div class="risk-factors">
        <h4>主要风险因素：</h4>
        <ul>
          <li v-for="(factor, idx) in report.riskFactors" :key="idx">
            {{ factor.name }} ({{ factor.level }})
          </li>
        </ul>
      </div>
    </div>

    <!-- 历史报告 -->
    <div class="history-reports">
      <h4>历史报告</h4>
      <div v-for="item in historyReports" :key="item.id">
        {{ item.timestamp }} - {{ item.riskLevel }}
      </div>
    </div>
  </div>
</template>

<script>
import { generateRiskReport, getRiskReports } from '@/api/report'

export default {
  data() {
    return {
      report: {},
      historyReports: []
    }
  },
  computed: {
    riskClass() {
      return {
        'low-risk': this.report.riskLevel === '低风险',
        'medium-risk': this.report.riskLevel === '中风险',
        'high-risk': this.report.riskLevel === '高风险'
      }
    }
  },
  async created() {
    this.loadHistory()
  },
  methods: {
    async generateReport() {
      this.report = (await generateRiskReport(this.$store.state.userId)).data
    },
    async loadHistory() {
      this.historyReports = (await getRiskReports(this.$store.state.userId)).data
    }
  }
}
</script>